<template>
	<view>
		<view class="flex-ju-b color666 border-bECEDEE ">
			<view @click="tapci(0)" class="flex-ju-c flex1  flex-col" :class="{active:tindex==0}">
				单词
				<view class="wh32-12 ra4  mt8">
					<image v-if="tindex==0" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
				</view>
			</view>
			<view @click="tapci(1)" class="flex-ju-c flex1  flex-col" :class="{active:tindex==1}">词根
				<view class="wh32-12 ra4  mt8">
					<image v-if="tindex==1" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
				</view>
			</view>
		</view>
		<view class="">
				
				<view class="con pt30 zindex5 flex-ju-b">
					<view class="flex-a-i   posire  bgfff ">
						<view @click="isall= !isall" class="flex-ju-b size24 pg5-20 bgf9f9f9 ra30 ">
							{{cindex==1?'字母顺序':cindex==2?'字母倒序':cindex==3?'时间顺序':cindex==4?'时间倒序':'随机排序'}}
							
							<image v-if="isall" mode="widthFix" src="/static/xiangtop.png" class="image width32 ml10"></image>
							<image v-else mode="widthFix" src="/static/bottoms.png" class="image width32 ml10"></image>
							
						</view>
					</view>
					<view v-if="tindex==1" @click="allopen" class="color666 mb8">全部{{iskai?'收起':'展开'}}</view>
				</view>
			
			
			<view @click="isall=false" v-if="isall" class="posifi mkds zindex55" style="background: rgba(0,0,0,0.6);">
				<view class="bgfff size28 pl30 pt30 mt-2"
					style="border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;">
					<view @click="tapsrot(1)" :class="{ctive:cindex==1}" class="border-bECEDEE height90 flex-a-i">字母顺序
					</view>
					<view @click="tapsrot(2)" :class="{ctive:cindex==2}" class="border-bECEDEE height90 flex-a-i">字母倒序
					</view>
					<view @click="tapsrot(3)" :class="{ctive:cindex==3}" class="border-bECEDEE height90 flex-a-i">时间顺序
					</view>
					<view @click="tapsrot(4)" :class="{ctive:cindex==4}" class="border-bECEDEE height90 flex-a-i">时间倒序
					</view>
					<view @click="tapsrot(5)" :class="{ctive:cindex==5}" class=" height90 flex-a-i">随机排序</view>
				</view>
			</view>


			<!-- <view class="flex-ju-b mt30">
				<view @click="tapsrot(f)" class="size24 bgf9f9f9 wh128-46 ra46 flex-ju-c" :class="{ctive:cindex==f}" v-for="(item,f) in ['字母顺序','字母逆序','时间顺序','时间逆序','随机排序']" :key="f">{{item}}</view>
			</view> -->

		</view>
		<view class="">
			<view class="flex-a-i ml30">
				<scroll-view @scroll="viewscroll" :show-scrollbar="false" scroll-y style="overflow-y: hidden;" class="hrig"
					:scroll-into-view="scrollview" scroll-with-animation>
					<nodata v-if="isdata"></nodata>
					<template v-if="type==2">
						
						<uni-collapse ref="collapse" v-model="open" class="viewcollapse" @change="change" >
							<uni-collapse-item :id="'section'+item.entry[0].toUpperCase()" :show-arrow="false" v-for="(item,index) in list" :key="index" @click.stop="zhaoa(item,index)" class="pb30 border-bECEDEE mt30" title-border="none" :name="'key'+index">
									<template v-slot:title>
										<view @click.stop="navto('/pages/index/root_detail?id='+item.entryId)" class="flex-ju-b mb20 ">
											<view class="ra32 bold "  >{{item.entry}}</view>
											<view>
												<view class="flex-a-i ">
													<view @click.stop="voice(item.audioUrl)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
														<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
													</view>
													<view @click.stop="tapopen(item,index)" class="bgF9F9F9  ra30 ml20 height40 flex-ju-c">
														<image mode="widthFix" src="/static/zhan.png" class="image width68"></image>
													</view>
												</view>
											</view>
										</view>
										<view  class="flex-ju-b color666">
											<view class=" size24 one flex1">{{item.definition}}</view>
											<view class="flex-a-i size22">
												{{item.zhan?'收起':'展开'}}
												<image v-if="item.zhan" mode="widthFix" src="/static/xiangtop.png" class="flex image width32"></image>
												<image v-else mode="widthFix" src="/static/xiangxia.png" class="flex image width32"></image>
											</view>
										</view>
									</template>
									<view class="content">
										<view class="flex-a-i flex-wrap size24">
											<view   v-for="(items,s) in item.words" :key="s" class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						
						
						<!-- <view :id="'section'+item.entry[0].toUpperCase()" v-for="(item,index) in list" :key="index"
							class="border-bECEDEE pb30 mt30">
							<view class="flex-ju-b mb20">
								<view @click="navto('/pages/index/root_detail?id='+item.entryId)"
									class="ra32 bold flex1">{{item.entry}}</view>
								<view>
									<view class="flex-a-i">
										<view @click.stop="voice(item.audioUrl)"
											class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
											<image mode="widthFix" src="/static/yuyin.png" class="image width28">
											</image>
										</view>
										<view @click.stop="tapopen(item,index)"
											class="bgF9F9F9  ra30 ml20 height40 flex-ju-c">
											<image mode="widthFix" src="/static/zhan.png" class="image width68"></image>
										</view>
									</view>
								</view>
							</view>
							<uni-collapse ref="collapse" @change="change($event,item)">
								<uni-collapse-item title-border="none">
									<template v-slot:title>
										<view class="flex-ju-b color666">
											<view class=" size24 one flex1">{{item.definition}}</view>
											<view class="flex-a-i size22">
												{{item.zhan?'收起':'展开'}}
											</view>
										</view>
									</template>
									<view class="content">
										<view class="flex-a-i flex-wrap size24">
											<view v-for="(items,s) in item.words" :key="s"
												class="mt20 pg2-20 border000 ra20 mr20">{{items}}</view>
										</view>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view> -->
					</template>
					<template v-else>
						<view :id="'section'+item.entry[0].toUpperCase()" v-for="(item,index) in list" :key="index"
							class="border-bECEDEE pb30 mt30">
							<view class="flex-ju-b mb20">
								<view @click="navto('/pages/index/words_detail?id='+item.entryId)"
									class="ra32 bold flex1">{{item.entry}}</view>
								<view>
									<view class="flex-a-i">
										<view @click.stop="voice(item.audioUrl)"
											class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
											<image mode="widthFix" src="/static/yuyin.png" class="image width28">
											</image>
										</view>
										<view @click.stop="tapopen(item,index)"
											class="bgF9F9F9  ra30 ml20 height40 flex-ju-c">
											<image mode="widthFix" src="/static/zhan.png" class="image width68"></image>
										</view>
									</view>
								</view>
							</view>
							<view class="color666 size24 one flex1">{{item.definition}}</view>
						</view>
					</template>

				</scroll-view>

				<view class="size22 color666">
					<view @click="tapzimu(item,p)" :class="{zactive:zindex==p}" class="wh60-35 flex-ju-c colorD8D8D8"
						v-for="(item,p) in zimu" :key="p">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iskai:false,
				open:[],
				close:[],
				zindex: -1,
				isdata: false,
				list: [],
				type: 1,
				tindex: 0,
				cindex: 1,
				scrollview: "",
				zimu: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
					'U', 'V', 'W', 'S', 'Y', 'Z'
				],
				isall: false,
				sort: 1,
				containerHeight: 610,
				sectionPositions: []
			}
		},
		onLoad() {
			this.getlist(1)
		},
		mounted() {

		},
		methods: {
			allopen(){
				this.iskai = !this.iskai
				
				if(this.iskai){
					this.open=this.close
					this.list.map(item=>{
						item.zhan = true
					})
				}else{
						this.open=[]
						this.list.map(item=>{
							item.zhan = false
						})
				}
				
			},
			zhaoa(item,index){
				if(item.zhan){
					item.zhan = false
				}else{
					item.zhan = true
				}
			},
			findCurrentSection(scrollTop, containerHeight) {
				const viewportTop = scrollTop;
				const viewportBottom = scrollTop + containerHeight;
				const viewportCenter = scrollTop + containerHeight / 2;

				// 查找最接近视口中心的区块
				let closestSection = null;
				let minDistance = Infinity;

				this.list.forEach(section => {
					const sectionCenter = section.top + section.height / 2;
					const distance = Math.abs(sectionCenter - viewportCenter);

					if (distance < minDistance) {
						minDistance = distance;
						closestSection = section;
					}
				});

				return closestSection;
			},
			viewscroll(event) {

				// const scrollTop = event.detail.scrollTop;
				//            const containerHeight = this.containerHeight;

				//            // 计算当前可视区域对应的区块
				//            const currentSection = this.findCurrentSection(scrollTop, containerHeight);
				//            if (currentSection) {
				//                const sectionIndex = parseInt(currentSection.id.split('-')[1]);
				//                this.currentNavIndex = sectionIndex;
				//                console.log('当前区块ID:', currentSection.id);
				//            }
			},
			tapzimu(item, index) {
				this.zindex = index
				this.scrollview = 'section' + item
			},
			tapopen(item, index) {
				this.http('/api/userReview?entryId=' + item.entryId + '&reviewType=' + (+this.tindex + 1), {}, 'delete')
					.then(res => {
						this.toast('已取消')
						this.list.splice(index, 1)
						this.nodata(this.list, this)
					})
			},
			change(e, item) {
				
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize()
				})
				// #endif
			},
			getlist(reviewType) {
				this.http('/api/userReview', {
					reviewType: this.tindex + 1,
					sort: this.sort
				}).then(res => {
					this.list = res.data
					res.data.map((item,index)=>{
						 this.close.push('key'+index)
					})
					this.nodata(this.list, this)

				})
			},
			tapsrot(index) {
				this.cindex = index
				this.sort = index
				this.getlist()
			},
			tapci(index) {
				this.tindex = index
				this.type = index + 1
				this.getlist()
			},

		}
	}
</script>

<style>
	.zactive {
		color: #FD2F55;
		font-weight: 500;
	}

	.ctive {
		font-weight: 600;
		color: #FD2F55;
		/* background: rgba(255,46,83,0.1); */
	}

	.active {
		color: #000;
		font-weight: 600;
	}

	.mkds {
		width: 100vw;
		height: 100vh;
		z-index: 5;
	}

	.hrig {
		height: calc(100vh - 121px)
	}
</style>